<template>
  <div class="CommentVue">
    <div class="header">
      <div class="headeLeft">
        <p class="commentTab">评论</p>
        <p class="total">共{{ commentList.total }}条评论</p>
      </div>
      <div class="headeRight" v-if="isLogin">
        <p class="name">{{ userInfo.nickname }}</p>
        <div class="imagBox">
          <img :src="userInfo.avatarUrl" />
        </div>
      </div>
    </div>
    <div class="commentInput">
      <form class="commentForm">
        <div class="textbox">
          <textarea
            name="comment"
            placeholder="期待你的神评论……"
            rows="5"
            maxlength="140"
            v-model="userComment"
          ></textarea>
        </div>
      </form>
      <div class="btnBox">
        <button @click="cmtUserComment('comment', '')">评论</button>
        <span
          ><em>{{ userCommentlength }}</em
          >/140</span
        >
      </div>
    </div>
    <div class="commentarea">
      <!--热评 -->
      <div
        class="commentarea-item hostItem"
        v-for="hotComment in commentList.hotComments"
        :key="hotComment.commentId + 'hotComment'"
      >
        <!-- 点击跳转个人 -->
        <div class="peoImg">
          <img
            :src="hotComment.user.avatarUrl"
            :alt="hotComment.user.nickname"
          />
        </div>
        <div class="personcontent">
          <!-- 点击跳转个人 -->
          <p class="name">{{ hotComment.user.nickname }}</p>
          <p class="commentContent">{{ hotComment.content }}</p>
          <div
            v-for="beReplied in hotComment.beReplied"
            :key="beReplied.beRepliedCommentId + 'beReplied'"
            class="replyContent"
          >
            <!-- 点击跳转个人 -->
            <span class="replypeople">{{ beReplied.user.nickname }}:</span
            >{{ beReplied.content }}
          </div>
          <div class="bottom">
            <span class="time">{{ MydayJs(hotComment.time) }}</span>
            <div class="operational">
              <span
                @click="delComment(hotComment.commentId)"
                class="del iconfont icon-del"
                :class="
                  hotComment.user.userId === userInfo.userId ? 'active' : ''
                "
                v-if="isLogin"
              ></span>
              <span
                class="point iconfont icon-praise"
                :class="hotComment.liked ? 'active' : ''"
                @click="toPointer(hotComment.commentId, hotComment.liked)"
              >
                ({{ hotComment.likedCount }})
              </span>
              <span
                class="replay iconfont icon-comment"
                @click="handleShowReply(hotComment.commentId + 'hotComment')"
              ></span>
            </div>
          </div>

          <div
            v-if="replayIndex === hotComment.commentId + 'hotComment'"
            class="replyBox"
          >
            <p class="title">
              我回复@<span>{{ hotComment.user.nickname }}</span
              >:
            </p>
            <div class="replyInput">
              <textarea
                name="replyComment"
                rows="1"
                placeholder="期待你的神评论……"
                v-model="userReply"
              ></textarea>
            </div>
            <div class="replybottom">
              <p>
                <span>{{ userReplylength }}</span
                >/140
              </p>
              <button @click="cmtUserComment('reply', hotComment.commentId)">
                评论
              </button>
            </div>
          </div>
        </div>
        <div class="host">
          <i class="iconfont icon-choicest"></i>
        </div>
      </div>
      <div
        class="commentarea-item"
        v-for="comment in commentList.comments"
        :key="comment.commentId + 'comment'"
      >
        <!-- 点击跳转个人 -->
        <div class="peoImg">
          <img :src="comment.user.avatarUrl" :alt="comment.user.nickname" />
        </div>
        <div class="personcontent">
          <!-- 点击跳转个人 -->
          <p class="name">{{ comment.user.nickname }}</p>
          <p class="commentContent">{{ comment.content }}</p>
          <div
            v-for="beReplied in comment.beReplied"
            :key="beReplied.beRepliedCommentId + 'beReplied'"
            class="replyContent"
          >
            <!-- 点击跳转个人 -->
            <span class="replypeople">{{ beReplied.user.nickname }}:</span
            >{{ beReplied.content }}
          </div>
          <div class="bottom">
            <span class="time">{{ MydayJs(comment.time) }}</span>
            <div class="operational">
              <span
                class="del iconfont icon-del"
                @click="delComment(comment.commentId)"
                :class="comment.user.userId === userInfo.userId ? 'active' : ''"
                v-if="isLogin"
              ></span>
              <span
                class="point iconfont icon-praise"
                :class="comment.liked ? 'active' : ''"
                @click="toPointer(comment.commentId, comment.liked)"
                >({{ comment.likedCount }})</span
              >
              <span
                class="replay iconfont icon-comment"
                @click="handleShowReply(comment.commentId + 'comment')"
              ></span>
            </div>
          </div>

          <div
            v-if="replayIndex === comment.commentId + 'comment'"
            class="replyBox"
          >
            <p class="title">
              我回复@<span>{{ comment.user.nickname }}</span
              >:
            </p>
            <div class="replyInput">
              <textarea
                name="replyComment"
                rows="1"
                placeholder="期待你的神评论……"
                v-model="userReply"
              ></textarea>
            </div>
            <div class="replybottom">
              <p>
                <span>{{ userReplylength }}</span
                >/140
              </p>
              <button @click="cmtUserComment('reply', comment.commentId)">
                评论
              </button>
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="limit"
        layout="prev,pager, next"
        :total="commentList.total"
        v-show="commentList.total > 0"
      >
        >
      </el-pagination>
      <div v-show="commentList.total === 0" class="noConment">
        <div class="status">
          <div class="statusIco">
            <i class="iconfont icon-empty-main"></i>
          </div>
          <p class="statusContent">暂无留言</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";

/* 
    type参数 0: 歌曲 1: mv 2: 歌单 3: 专辑 4: 电台 5: 视频 6: 动态
*/
import { reqCommitComment, reqCommentPoint } from "../api/mv";
import { mapGetters } from "vuex";
export default {
  name: "Comment",
  props: ["id", "commentList", "type", "limit"],
  data() {
    return {
      replayIndex: null, // 展示回复输入
      isreply: false, // 控制关闭显示回复输入框
      currentPage: 1, // 当前页
      userComment: "", // 用户评论
      userReply: "", // 用户回复评论
    };
  },
  methods: {
    // 展示回复输入框
    handleShowReply(index) {
      if (!this.isLogin) {
        this.$message({
          message: "请先登入",
          type: "warning",
        });
        return;
      }
      this.isreply = !this.isreply;
      if (this.isreply) {
        this.replayIndex = index;
        return;
      }
      this.replayIndex = null;
    },
    // 分页器改变当前页
    handleCurrentChange(currentPage) {
      this.$emit("handleCurrentChange", currentPage);
    },
    // 用户评论和回复
    cmtUserComment(args, commentId) {
      let { isLogin, userComment, id, userReply, type } = this;
      if (!isLogin) {
        this.$message({
          message: "请先登入",
          type: "warning",
        });
        return;
      }
      // 评论
      if (args === "comment") {
        userComment = userComment.trim();
        if (!userComment) {
          this.$message({
            message: "输入的内容不能为空",
            type: "warning",
          });
          return;
        }
        this.commitComment(
          {
            t: 1,
            type: type,
            id: id,
            content: userComment,
            commentId: "",
          },
          "评论"
        );
        this.userComment = "";
        return;
      }
      //  回复
      if (args === "reply") {
        userReply = userReply.trim();
        if (!userReply) {
          this.$message({
            message: "输入的内容不能为空",
            type: "warning",
          });
          return;
        }
        this.commitComment(
          {
            t: 2,
            type: type,
            id: id,
            content: userReply,
            commentId: commentId,
          },
          "回复"
        );
        this.userReply = "";
        this.isreply = false;
        this.replayIndex = null;
      }
    },
    // 提交用户评论和回复
    commitComment(args, title) {
      reqCommitComment(args).then(() => {
        this.$emit("getComment", this.id);
        this.$message({
          message: `${title}成功`,
          type: "success",
        });
      });
      // console.log(args);
    },
    //  点赞功能
    toPointer(commentId, liked) {
      if (!this.isLogin) {
        this.$message({
          message: "请先登入",
          type: "warning",
        });
        return;
      }
      console.log(commentId, liked);
      const { id, type } = this;
      reqCommentPoint({
        id: id,
        cid: commentId,
        t: Number(!liked),
        type: type,
      }).then(() => {
        this.$emit("getComment", id);
      });
    },
    // 删除评论
    delComment(commentId) {
      if (!this.isLogin) {
        this.$message({
          message: "请先登入",
          type: "warning",
        });
        return;
      }
      this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const { id, type } = this;
          this.commitComment(
            {
              t: 0,
              type: type,
              id: id,
              content: "",
              commentId: commentId,
            },
            "删除评论"
          ).then(() => {
            this.$emit("getComment", id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    // 时间格式化
    MydayJs(time) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let nowday = Number("" + year + month + day);
      let dayArr = dayjs(time).format("YYYY-MM-DD-HH-mm").split("-");
      let commentday = Number(dayArr[0] + dayArr[1] + dayArr[2]);
      let num = nowday - commentday;
      if (num > 1) {
        return dayArr[0] + "年" + dayArr[1] + "月" + dayArr[2] + "日";
      }
      if (num === 1) {
        return (
          dayArr[1] + "月" + dayArr[2] + "日 " + dayArr[3] + ":" + dayArr[4]
        );
      }
      if (num === 0) {
        return dayArr[3] + ":" + dayArr[4];
      }
    },
  },
  computed: {
    ...mapGetters(["isLogin", "userInfo"]),
    userCommentlength() {
      if (!this.userComment.trim()) {
        return 0;
      }
      return this.userComment.trim().length;
    },
    userReplylength() {
      if (!this.userReply.trim()) {
        return 0;
      }
      return this.userReply.trim().length;
    },
  },
  mounted() {
    // const { id } = this.$route.query;
    // this.id = id;
    // this.getMvComment(id);'
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
}
.CommentVue {
  width: 100%;
  height: 100%;
}
// 提交评论区开始
.header {
  display: flex;
  justify-content: space-between;
  height: 60px;
  align-items: center;
  .headeLeft {
    display: flex;
    align-items: center;
    .commentTab {
      line-height: 24px;
      font-size: 24px;
      color: #333333;
    }
    .total {
      padding-left: 20px;
      color: #999999;
      font-size: 14px;
    }
  }
  .headeRight {
    display: flex;
    .name {
      padding: 0 20px;
      line-height: 30px;
      color: #666666;
      font-size: 14px;
    }
    .imagBox {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.commentForm {
  .textbox {
    padding: 10px 15px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    textarea {
      outline: none;
      border: none;
      width: 100%;
      color: #333333;
      min-height: 90px;
      font-size: 14px;
      resize: none;
    }
  }
}
.btnBox {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 50px;
  button {
    width: 56px;
    height: 28px;
    line-height: 28x;
    border-radius: 3px;
    background-color: #409eff;
    color: white;
    text-align: center;
    border: none;
    outline: none;
  }
  span {
    color: #666666;
    padding-left: 20px;
    line-height: 28px;
    font-size: 14px;
    em {
      font-style: normal;
    }
  }
}
// 暂无评论
.noConment {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  .status {
    text-align: center;
    .statusIco {
      font-size: 14px;
      line-height: 24px;
      color: #999999;
      i {
        line-height: 140px;
        font-size: 100px;
        color: #bbb;
        opacity: 0.8;
      }
    }
    .statusContent {
      font-size: 14px;
      line-height: 24px;
      color: #999;
    }
  }
}
// 提交评论区结束
// 评论展示区开始
// commentarea.{
//   display: flex;
//   flex
// }
.commentarea-item {
  padding: 15px 0;
  display: flex;
  border-bottom: 1px solid #f2f2f2;
  position: relative;
  .peoImg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    align-self: flex-start;
    cursor: pointer;
    flex-shrink: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .personcontent {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    .name {
      padding-bottom: 10px;
      line-height: 14px;
      font-size: 14px;
      color: #999999;
      cursor: pointer;
    }
    .commentContent {
      font-size: 14px;
      line-height: 14px;
    }
    .replyContent {
      padding: 10px;
      line-height: 28px;
      margin: 5px 0;
      border-radius: 4px;
      color: #666;
      background: #f2f2f2;
      font-size: 14px;
      .replypeople {
        color: #999999;
        cursor: pointer;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    .time {
      line-height: 28px;
      color: #999999;
      font-size: 14px;
    }
    .operational {
      flex-grow: 1;
      text-align: right;
      span {
        cursor: pointer;
        line-height: 28px;
        margin-left: 15px;
        color: #999999;
      }
      .iconfont.icon-praise.active {
        color: #ff641e;
      }
      .del.iconfont.icon-del {
        display: none;
      }
      &:hover {
        .del.iconfont.icon-del.active {
          display: inline-block;
        }
      }
    }
  }
  .replyBox {
    padding: 10px 15px;
    background: #efefef;
    border-radius: 4px;
    .title {
      font-size: 14px;
      line-height: 14px;
      padding-bottom: 10px;
      color: #999999;
    }
    .replyInput {
      border-radius: 4px;
      padding: 10px 15px;
      background-color: white;
      textarea {
        width: 100%;
        min-height: 24px;
        line-height: 24px;
        font-size: 14px;
        color: #333333;
        resize: none;
        outline: none;
        border: none;
        padding: 0;
      }
    }
    .replybottom {
      padding-top: 15px;
      display: flex;
      justify-content: flex-end;
      p {
        padding: 0 20px;
        color: #666666;
        font-size: 14px;
        line-height: 28px;
      }
      button {
        width: 56px;
        height: 28px;
        line-height: 28x;
        border-radius: 14px;
        background-color: #409eff;
        padding: 7px 15px;
        color: white;
        font-size: 12px;
        text-align: center;
        border: none;
        outline: none;
      }
    }
  }
  .host {
    position: absolute;
    right: 0;
    top: -8px;
    z-index: 1;
    i {
      color: #ff641e;
      font-size: 60px;
      opacity: 0.8;
    }
  }
}
// 评论展示区结束
//  分页器
.el-pagination.is-background {
  text-align: center;
}
</style>
